@import "mixin_helpers";

.navbar .brand {
  line-height: 27px;
  color: #bbb;
  @include text-shadow(0 1px 0 #000);
}

.navbar-inverse .navbar-inner {
  border-bottom: 1px solid rgba(10, 13, 14, 0.8);
  @include std-bg(lighten(#11161A, 5), #11161A);
  border-left: 0;
  border-right: 0;
}

.navbar.navbar-top {
  margin-bottom: 0px;

  .navbar-inner {
    @include border-radius(0);
  }
}

.navbar-search {
  margin-top: 10px;
  .search-query {
    height: 20px;
    padding: 2px 10px;

    &.animated {
      width: 100px;
      @include transition(width .3s);

      &:focus, .focused {
        width: 200px;
      }
    }
  }

  i {
    position: absolute;
    right: 10px;
    top: 5px;
  }
}

.navbar-inverse .navbar-search .search-query, .navbar-inverse .navbar-search .search-query {

  background: rgba(35, 43, 48, 0.83);

  &:focus, &.focused {
    padding: 2px 10px;
    border: 1px solid transparent;
  }
}

.navbar-inverse .nav {
  margin-top: 10px;
}

.navbar-inverse .nav > li {
  > a {
    background: rgba(0,0,0,.5);
    @include border-radius(4px);
    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15));
    height: 20px;
    line-height: 20px;
    padding: 3px 10px;
    margin-right: 10px;

    &:hover {
      background: rgba(0,0,0,.8);
    }
  }

  &.active > a {
    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15));
  }
}

//this fixes the dropdown button on the topbar (the one on the right that opens the menu)
.navbar .btn, .navbar .btn-group {
  margin-top: -4px;
}

.menu-avatar {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

